<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
<head>
	<th:block th:include="include :: header" />
</head>
<body class="gray-bg">
	<div class="row  border-bottom white-bg dashboard-header">
        <div class="col-sm-12">
            <form id="operlog-form">
                <div class="select-list">
                    <ul>
                        <li class="select-time">
                            <label>时间范围： </label>
                            <input type="text" class="date-input" id="startTime" placeholder="开始时间" name="startTime" th:value="${startTime}" />
                            <span>-</span>
                            <input type="text" class="date-input" id="endTime" placeholder="结束时间" name="endTime" th:value="${endTime}"/>
                        </li>
                        <li>
                            <a class="btn btn-primary btn-rounded btn-sm" onclick="showReferrer()"><i class="fa fa-search"></i>&nbsp;搜索</a>
                        </li>
                    </ul>
                </div>
            </form>
        </div>
    </div>
    <div class="wrapper wrapper-content animated fadeInRight">
        <div class="row">
            <div class="col-sm-12">
                <div class="ibox float-e-margins">
                    <div class="ibox-title">
                        <h5>我的邀请</h5>
                    </div>
                    <div class="ibox-content" style="width: 100%;height: auto;overflow: hidden; overflow-y:auto; ">
                        <div style="height:600px" id="echarts-chart"></div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <th:block th:include="include :: footer" />
    <th:block th:include="include :: echarts-js" />
    <script th:inline="javascript">
        var myChart = null;
        var userLevel = [[${@dict.getType('user_level')}]];
	    $(function () {
	        myChart = echarts.init(document.getElementById("echarts-chart"));
	        showReferrer();
	    });

	    function showReferrer() {
            $.modal.loading("数据加载中，请稍后...");
            $.post(ctx + "system/wdyUser/referrer", { "userId": [[${userId}]], "startTime": $("#startTime").val(), "endTime": $("#endTime").val()}, function(result) {
                myChart.setOption(option = {
                    tooltip: {
                        trigger: 'item',
                        triggerOn: 'mousemove',
                        formatter: function (dat) {
                            return '用&nbsp;&nbsp;户:' + dat.data.name + '&nbsp;&nbsp;等&nbsp;&nbsp;级:' + $.table.selectDictLabel(userLevel, dat.data.level) + "<br>"
                                + '充&nbsp;&nbsp;值:' + dat.data.recharge + '&nbsp;&nbsp;购买理财:' + dat.data.buyProduct + "<br>"
                                + '充值业绩:' + dat.data.teamRecharge + '&nbsp;&nbsp;理财业绩:' + dat.data.teamBuyProduct + "<br>"
                                + '亲密好友:' + dat.data.directChildrenCount + '&nbsp;&nbsp;累计好友:' + dat.data.childrenCount + "<br>"
                                + '直推矿机数量:' + (dat.data.directChildrenBuyProductCount + dat.data.buyProductCount) + '&nbsp;&nbsp;团队矿机数量:' + (dat.data.teamBuyProductCount + dat.data.buyProductCount);
                        },
                    },
                    series: [
                        {
                            type: 'tree',
                            orient: 'horizontal',  // vertical horizontal
                            rootLocation: {x: 40, y: 'center'}, // 根节点位置  {x: 100, y: 'center'}
                            data: [result.data],

                            top: '1%',
                            left: '7%',
                            bottom: '1%',
                            right: '20%',

                            symbolSize: 7,

                            label: {
                                normal: {
                                    position: 'left',
                                    verticalAlign: 'middle',
                                    align: 'right',
                                    fontSize: 9
                                }
                            },

                            leaves: {
                                label: {
                                    normal: {
                                        position: 'right',
                                        verticalAlign: 'middle',
                                        align: 'left'
                                    }
                                }
                            },

                            expandAndCollapse: true,
                            animationDuration: 550,
                            animationDurationUpdate: 750
                        }
                    ]
                });
                $(window).resize(myChart.resize);
                $.modal.closeLoading();
            });
        }
    </script>
</body>
</html>